<template>
    <view class="columnbox wdh-100 content">
		
		<image src="http://mkxd-app.oss-cn-beijing.aliyuncs.com/2025/01/08/df4e7eb4768b40febe535a0b1a3be373.png" mode="widthFix" class="wdh-100" style="height: 200rpx;"></image>
        <!-- <image src="/static/img/couponbanner.png" mode="widthFix" class="wdh-100" style="height: 200rpx;"></image> -->
        <view class="rowbox wdh-100 jus coupon-img">
            <image src="/static/img/coupon-hot.png" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
            <image src="/static/img/coupon-title.png" mode="widthFix"
                style="width: 200rpx;height: 70rpx;margin-left: 20rpx;"></image>
        </view>
        <view class="rowbox jus sel-box">
            <view v-for="(item,index) in typeList" :key='index' @click="curtype=index" class="rowbox g-box"
                :class="{'zhuanzengbtn':curtype==index}">{{item.title}}</view>
        </view>
        <view class="columnbox wdh-100" v-for="(item,index) in 10" :key='index'>
            <view class="rowbox wdh-100 c-detail spb">
                <view class="columnbox c-desc als">
                    <view class="wdh-100 c-name">摩卡洗车.洗车券</view>
                    <view class="wdh-100 c-intro">使用说明：后台编辑说明内容，不编辑则不显示该内容</view>
                    <view class="wdh-100 rowbox spb">
                        <view class="c-intro" style="color: #6D6A6B ;">石家庄市道里区安心街39号</view>
                        <view class="rowbox c-intro" style="color: #6D6A6B ;">
                            <image src="/static/img/weizhi.png" mode="widthFix"
                                style="width: 28rpx;height: 28rpx;margin-right: 10rpx;"></image>
                            3.22KM
                        </view>
                    </view>
                </view>
                <view class="columnbox c-price">
                    <view>¥30</view>
                    <view class="g-btn">立即领取</view>
                </view>
            </view>
            <view class="rowbox jus g-user-box" v-if="index==4">用户136****2547转增</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                zhuanzeng: false,
                typeList: [{
                        title: '洗车券'
                    },
                    {
                        title: '停车券'
                    },
                    {
                        title: '加油券'
                    }
                ],
                curtype: 0
            };
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        font-family: PingFang SC;
    }

    .color-box {
        background: #17698F;
        padding: 20rpx 40rpx;
        border-radius: 0 0 40rpx 40rpx;
        padding-bottom: 100rpx;
        color: #fff;
    }

    .coupon-num {
        margin-left: 100rpx;
        font-size: 40rpx;
    }

    .coupon-use {
        font-size: 28rpx;
        margin-left: 100rpx;
        margin-top: 20rpx;
    }

    .use-btn {
        color: #17698F;
        background: #fff;
        font-size: 28rpx;
        width: 170rpx;
        height: 70rpx;
        border-radius: 100rpx;
    }

    .type-box {
        width: 710rpx;
        padding: 40rpx 40rpx;
        background: #fff;
        margin-top: -70rpx;
        border-radius: 20rpx;
        box-shadow: 0px 4px 10px 2px rgba(206, 206, 206, 0.48);

        .one-type {
            font-size: 28rpx;
            position: relative;

            image {
                width: 70rpx;
                height: 50rpx;
                margin-bottom: 10rpx;
            }
        }

        .dot-box {
            position: absolute;
            right: -20rpx;
            top: -20rpx;
            background: #cc0001;
            color: #fff;
            padding: 4rpx 10rpx;
            border-radius: 100rpx;
            font-size: 22rpx;
            color: #fff;
            line-height: 22rpx;
        }
    }

    .sel-box {
        margin-top: 20rpx;
        width: 710rpx;
        margin-bottom: 20rpx;

        .sel-one {
            font-size: 28rpx;
            border: #efefef solid 1px;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            width: 200rpx;
        }

        .g-box {
            font-size: 28rpx;
            background: #e9e9e9;
            color: #6c6c6c;
            height: 62rpx;
            width: 140rpx;
            border-radius: 10rpx;
            margin-right: 40rpx;
        }

        .zhuanzengbtn {
            background: #17698F;
            color: #fff;
        }
    }




    .c-detail {
        box-shadow: 0px 2px 3px 0px rgba(206, 206, 206, 0.4);
        padding: 0 20rpx;
        border-radius: 20rpx;
        padding-right: 0;
        width: 710rpx;
        margin-top: 20rpx;
        overflow: hidden;
        border: #fbfbfb solid 1px;

        .c-price {
            font-size: 32rpx;
            color: #fff;
            font-weight: bold;
            background: #17698F;
            height: 200rpx;
            width: 170rpx;
            border-radius: 20rpx;
        }

        .c-desc {
            width: calc(100% - 210rpx);
        }

        .c-name {
            font-size: 32rpx;
            color: rgba(56, 148, 254, 1);
        }

        .c-intro {
            margin-top: 10rpx;
            color: rgba(154, 154, 154, 1);
            font-size: 24rpx;
        }

        .g-btn {
            color: #17698F;
            font-size: 24rpx;
            background: #fff;
            padding: 10rpx 20rpx;
            border-radius: 100rpx;
            margin-top: 20rpx;
            transform: scale(.9);
        }
    }

    .g-user-box {
        font-size: 24rpx;
        color: #17698F;
        background: #f2f2f2;
        justify-content: flex-start;
        width: 710rpx;
        padding: 20rpx 20rpx;
        border-radius: 0 0 20rpx 20rpx;
    }

    .coupon-img {
        padding: 20rpx 20rpx;
    }
</style>